<div id="main-list">
  <div class="col-lg-12">
    <!-- START panel-->
    <div class="panel-container">
      <md-toolbar>
        <div class="md-toolbar-tools">
          <h3 ng-if="filter.project && project">
            <span translate>METRIC_CONTAINER_BAR_TITLE_PROJECT</span>:
            <span ng-bind="project.name"></span>
          </h3>
          <h3 ng-if="filter.pattern && !(project && filter.project)">
            <span translate>METRIC_CONTAINER_BAR_TITLE_PATTERN</span>:
            <span ng-bind="filter.pattern"></span>
          </h3>
          <h3 ng-if="!filter.pattern && !filtr.project && !project">
            <span translate>METRIC_CONTAINER_BAR_TITLE_PATTERN</span>: *
          </h3>
          <span flex></span>
          <md-button class="md-icon-button md-ink-ripple" aria-label="link" ui-sref="banshee.admin.team.project.detail({teamID:teamID,id: projectId})" ng-if="filter.project && project">
            <md-icon class="fa fa-cog"></md-icon>
          </md-button>
        </div>
      </md-toolbar>
      <div class="panel-content">
        <div class="panel-content-title">
          <div layout-gt-xs="row">
            <form name="form" ng-submit="searchPattern()" flex="45" novalidate>
              <md-input-container class="md-block search-pattern">
              <label translate>METRIC_SEARCH_PATTERN_LABEL_TEXT</label>
                <input ng-model="filter.pattern">
                <div ng-if="filter.pattern&&isGraphiteName(filter.pattern)" ng-style="{'color': 'saddlebrown', 'margin-top': '10px'}">
                  {{ 'ADMIN_RULE_PATTERN_WARN_TEXT' | translate }}
                  <span ng-click="filter.pattern=translateGraphiteName(filter.pattern)" ng-style="{'cursor': 'pointer', 'color': 'red', 'text-decoration': 'underline'}">
                    {{ translateGraphiteName(filter.pattern) }}
                  </span>
                </div>
              </md-input-container>
            </form>
          </div>
          <md-input-container>
            <md-select ng-model="filter.datetime" aria-label="datetime">
              <label ng-if="!datetimeInList(filter.datetime)" ng-bind="secondsToTimespanString(filter.datetime)"></label>
              <md-option ng-if="datetimeInList(filter.datetime)" ng-repeat="time in dateTimes" ng-value="time.seconds" ng-selected="$index === 0">
                {{ time.label | translate }}
              </md-option>
              <md-option ng-if="!datetimeInList(filter.datetime)" ng-repeat="time in dateTimes" ng-value="time.seconds" >
                {{ time.label | translate }}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container>
            <md-select ng-model="filter.limit" aria-label="limit">
              <md-option ng-repeat="limit in limitList" ng-value="limit.val" ng-selected="$index === 2">
                {{limit.label | translate}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container>
            <md-select ng-model="filter.sort" aria-label="sort">
              <md-option ng-repeat="sort in sortList" ng-value="sort.val" ng-selected="$index === 0">
                {{sort.label | translate}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container>
            <md-select ng-model="filter.type" aria-label="sort">
              <md-option ng-repeat="type in typeList" ng-value="type.val" ng-selected="$index === 0">
                {{type.label | translate}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="pull-right">
            <md-button class="md-icon-button md-primary" aria-label="pause" ng-click="restart()">
            <md-tooltip md-direction="bottom"> {{ 'METRIC_REFRESH_TOOLTIP_TEXT' | translate }} </md-tooltip>
              <md-icon class="fa fa-refresh" ng-class="{spinner: spinner}"></md-icon>
            </md-button>
          </md-input-container>
          <md-input-container class="pull-right">
            <md-button class="md-icon-button md-primary" aria-label="pause" ng-click="toggleCubism()">
              <md-tooltip md-direction="bottom" ng-if="!filter.status"> {{ 'METRIC_PAUSE_TOOLTIP_TEXT' | translate }} </md-tooltip>
              <md-tooltip md-direction="bottom" ng-if="filter.status"> {{ 'METRIC_RESUME_TOOLTIP_TEXT' | translate }} </md-tooltip>
              <md-icon class="fa" ng-class="{'fa-pause': !filter.status, 'fa-play': filter.status}"></md-icon>
            </md-button>
          </md-input-container>
          <md-input-container class="pull-right">
          <md-button ng-bind="datetimeRangeInString()">
            </md-button>
          </md-input-container>
        </div>
        <div id="cubism-wrap">
          <div class="chart-box-top chart-box-force-scrollbar">
            <div class="chart-box-top-div">
            </div>
          </div>
          <div class="chart-box chart-box-force-scrollbar">
            <div id="chart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- END panel-->
  </div>
</div>
